<ix-page-header>
  <div class="search-container">
    <ix-search-input2
      #searchInput
      class="search-input"
      [properties]="searchProperties"
      [query]="searchQuery"
      [advancedSearchPlaceholder]="advancedSearchPlaceholder"
      (runSearch)="onSearch(searchInput.query());"
    ></ix-search-input2>
    <div class="search-button-wrapper">
      <button mat-button type="button" ixTest="search" (click)="onSearch(searchInput.query())">
        {{ 'Search' | translate }}
      </button>
      <button
        *ixRequiresRoles="requiredRoles"
        mat-button
        ixTest="add-privilege"
        [color]="'primary'"
        [ixUiSearch]="searchableElements.elements.add"
        (click)="openForm()"
      >
        {{ 'Add' | translate }}
      </button>
    </div>
  </div>
</ix-page-header>

<div class="table-container">
  <ix-table
    [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
    [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider.emptyType$ | async)"
    [ixUiSearch]="searchableElements.elements.list"
  >
    <thead
      ix-table-head
      [columns]="columns"
      [dataProvider]="dataProvider"
    ></thead>
    <tbody
      ix-table-body
      [columns]="columns"
      [dataProvider]="dataProvider"
      [isLoading]="!!(dataProvider.isLoading$ | async)"
    ></tbody>
  </ix-table>
  <ix-table-pager
    [dataProvider]="dataProvider"
    [pageSize]="+pagination.pageSize"
    [currentPage]="+pagination.pageNumber"
  ></ix-table-pager>
</div>
